﻿@{
    ViewData["Title"] = "博客管理";
}
<i-form :label-width="80">
    <row>
        <i-col span="21">
            <Form-Item label="关键字">
                <i-input v-model="where.key" placeholder="请输入要查询的关键字..."></i-input>
            </Form-Item>
        </i-col>
        <i-col span="3">
            <Form-Item>
                <i-button type="primary" @@click="search">查询</i-button>
            </Form-Item>
        </i-col>
    </row>
</i-form>
<i-table border :columns="columns" :data="blogs" :loading="loading"></i-table>
<div style="text-align:center;margin:20px">
    <page :total="where.totalCount" :current="where.pageIndex" :page-size="where.pageSize" @@on-change="onChange" size="small"></page>
</div>
@section Scripts
    {
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loading:false,
                columns: [
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '标签',
                        key: 'tags',
                        render: (h, params) => {
                            let tags = [];
                            for (let i = 0, j = params.row.tags.length; i < j; i++) {
                                tags.push(params.row.tags[i].name);
                            }
                            return h('span', tags.join(','));
                        }
                    },
                    {
                        title: '浏览',
                        key: 'views',
                        width: 150
                    },
                    {
                        title: '日期',
                        key: 'created',
                        width: 160
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            app.edit(params.index);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            app.remove(params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                where: { pageSize: 25, pageIndex: 1, totalCount: 0, key: '' },
                blogs: []
            },
            mounted: function () {
                this.search();
            },
            methods: {
                search() {
                    this.loading = true;
                    axios.get('/Admin/Blog/GetBlogs', { params: this.where })
                        .then(function (response) {
                            app.blogs = response.data.dataSet;
                            app.where.totalCount = response.data.totalCount;
                            app.loading = false;
                        })
                        .catch(function (err) {
                            app.$Message.error(err);
                        });
                },
                edit(index) {
                    location.href = `/Admin/Blog/Edit?id=${this.blogs[index].id}`;
                },
                remove(index) {
                    axios.get('/Admin/Blog/Delete', { params: { id: this.blogs[index].id } })
                        .then(function (response) {
                            app.search();
                        })
                        .catch(function (err) {
                            app.$Message.error(err);
                        });

                },
                onChange(page) {
                    this.where.pageIndex = page;
                    this.search();
                }
            }
        });
    </script>
}